window.addEventListener("load", () => {
    class car {
        constructor() {
            this.all1 = document.querySelector(".all1")
            this.all2 = document.querySelector(".all2")
            this.detial = document.getElementById("detial")
            this.gold = document.getElementById("gold")
            this.js = document.getElementById("fond")
            console.log(this.js);
            this.cdata = JSON.parse(localStorage.getItem("cart"))
            console.log(this.cdata);
            this.loadListData().then((res) => {
                this.data = res
                this.rander()
            })
            this.godata = []
            this.allsum = 0
            this.goodsnum = 0
            this.bindevent()
        }
        goodsremove(id) {
            // let _this = this
            this.id = id
        }

        bindevent() {
            // 结算功能
            on(this.js, "click", () => {
                    console.log("结算");
                    console.log(this.godata);
                    console.log(this.cdata);
                    this.arr = this.godata
                    this.arr.sort(function(a, b) {
                        return b - a
                    })
                    for (let i = 0; i < this.arr.length; i++) {
                        this.cdata.splice(this.arr[i], 1)
                    }
                    $(".shanchu").remove()
                    this.save()
                    this.cdata = JSON.parse(localStorage.getItem("cart"))
                    this.loadListData().then((res) => {
                        this.data = res
                        this.rander()
                        this.heji.innerText = "商品总价￥" + 0
                        this.gold.innerText = 0
                        this.gsum.innerText = 0
                    })


                })
                // 删除shijian
            on(this.detial, "click", ".p5", (e) => {
                console.log("测试")
                this.id = e.origin.getAttribute("data_id")
                this.cdata = JSON.parse(localStorage.getItem("cart"))
                console.log(this.id);
                this.cdata.splice(this.id, 1)
                $(".shanchu").remove()
                this.save()
                this.cdata = JSON.parse(localStorage.getItem("cart"))
                this.loadListData().then((res) => {
                    this.data = res
                    this.rander()
                })
            })

            // 每个商品操作
            on(this.detial, "change", ".input", (e) => {
                this.handlerChange(e.target, e.origin.getAttribute("data_id"))
            })
            on(this.all1, "change", (e) => {

                this.allhandlerChange(e.target)
            })
            on(this.all2, "change", (e) => {
                this.allhandlerChange(e.target)
            })

        }

        // 商品单选框操作
        handlerChange(ele, id) {
                id = Number(id)

                if (ele.checked) {
                    console.log("true")
                    this.godata.push(id)
                    this.pp = ele.parentNode.childNodes[11].childNodes[1].innerText
                    this.allsum += Number(this.pp)
                    this.goodsnum += 1

                    this.heji.innerText = "商品总价￥" + this.allsum
                    this.gold.innerText = this.allsum

                    this.gsum.innerText = this.goodsnum
                } else {
                    console.log("false")
                    console.log(id)
                    this.godata = this.godata.filter(item => item !== id)
                    this.pp = ele.parentNode.childNodes[11].childNodes[1].innerText
                    this.allsum -= Number(this.pp)
                    this.goodsnum -= 1
                    this.heji.innerText = "商品总价￥" + this.allsum
                    this.gold.innerText = this.allsum
                    this.gsum.innerText = this.goodsnum
                        // console.log(this.allsum);
                }
                console.log(this.godata)
            }
            // 表头单选框操作
        allhandlerChange(ele) {

            if (ele.checked) {
                for (let i = 0; i < this.cdata.length; i++) {
                    this.godata[i] = i
                }
                console.log(this.cdata.length);
                console.log(this.godata);

                this.input.forEach.call(this.input, function(input) {
                    input.checked = true
                })
                this.all2.checked = true
                this.all1.checked = true
                    // 商品全选价格变动
                this.allsum = this.pisum
                this.goodsnum = this.pr.length
                this.heji.innerText = "商品总价￥" + this.allsum
                this.gold.innerText = this.allsum
                this.gsum.innerText = this.goodsnum

            } else {
                this.all2.checked = false
                this.all1.checked = false

            }
        }
        loadListData() {

            let options = ({
                url: "../static/data/ind.json",
                type: "GET",
                dataType: "json",

                dataType: "json"
            })
            return ajax(options)

        }
        rander() {
            console.log(this.cdata);
            for (let i = 0; i < this.cdata.length; i++) {
                this.re = this.cdata[i].id
                this.sum = this.cdata[i].sum
                console.log(this.sum);
                this.a = this.re.match(/a(\d?)/)[1];
                this.b = this.re.match(/b(\d+)/)[1];
                this.goods = this.data[this.a].data[this.b]
                    // $("#detial").append
                    // this.detial.innerHTML +=
                $("#detial").append(`<div class="shopcar shanchu" >
                    <div class="shop">
                        <div class="shangpin">
                            <input type="checkbox" name="check" class="input" data_id="${i}" />
                            <div class="tp">
                                <img src="${this.goods.pic}">
                            </div>
                            <p class="p1">${this.goods.name}</p>
                            <p class="p2">￥${this.goods.price}</p>

                            <div class="jj">
                                <p class="jian">-</p>
                                <p class="num">${this.sum}</p>
                                <p class="jia">+</p>
                            </div>
                            <p class="p4 prc">￥<b>${this.goods.price * this.sum}</b></p>
                            <p class="p5" data_id="${i}">
                                <img src="../static/img/lj.png" alt="">
                            </p>
                        </div>
                    </div>
                </div>`)
                this.input = document.querySelectorAll(".input")

            }

            this.num = document.querySelector(".wjh")
            this.pr = document.querySelectorAll(".prc>b")
            this.heji = document.getElementById("heji")
            this.gsum = document.querySelector(".wjh")
            this.heji.innerText = "商品总价￥" + this.allsum
            this.gold.innerText = this.allsum
            this.gsum.innerText = this.goodsnum
                // 选中全部商品
            this.pisum = 0
            for (let i = 0; i < this.pr.length; i++) {

                this.pisum += Number(this.pr[i].innerText)
            }

        }
        save() {
            localStorage.setItem("cart", JSON.stringify(this.cdata));
        }

    }
    new car()
})